{extend name="../index/public/mlay" /}
{block name="title"}个人中心{/block}
{block name="style"}
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
{/block}
{block name="header"}
{include file="public/header" /}
{/block}
{block name="container"}
<div id="app">
	<div style="border-radius: 10px;margin: 20px 10px 10px 10px;background: #fff;">
		<div class="weui-flex ju_sb ai_center" style="font-size: 0.7rem;padding: 10px;">
			<div class="weui-flex__item" style="color: #333333;">订单管理</div>
			<div @click="click_all()" class="weui-flex__item tar" style="color: #bebebe;font-size: 0.65rem;">查看全部
				<img style="width: 0.6rem;height: 0.6rem;" src="__TEM_STATIC__/img/my/rightThearrow.png">
			</div>
		</div>
		<div class="weui-flex padding-tb-xs">
			<div class="weui-flex__item" @click="click_details(item.id)" style="text-align: center;" v-for="(item,index) in tab" :key="index">
				<img style="width: 1.15rem;height: 1.15rem;" v-cloak :src="item.img">
				<div style="font-size: 0.65rem;" v-cloak>{{item.text}}</div>
			</div>
		</div>
	</div>
	<div v-if="this.level>1" style="background: #fff;border-radius: 10px;margin: 10px;padding: 10px 20px;">
		<div class="weui-flex flex-row">
			<div @click="click_tab(index)" class="weui-flex__item flex4 tac margin-tb-xs" v-for="(item,index) in tab2" :key="index">
				<img style="width: 1.1rem;height: 1.1rem;" v-cloak :src="item.img">
				<div style="font-size: 0.65rem;" v-cloak>{{item.text}}</div>
			</div>
		</div>
	</div>
	<div v-else style="background: #fff;border-radius: 10px;margin: 10px;padding: 10px 40px;">
		<div class="weui-flex">
			<div @click="click_tab2(index)" class="weui-flex__item flex4" style="text-align: center;flex: 0 0 25%;" v-for="(item,index) in tab3" :key="index">
				<img style="width: 1.1rem;height: 1.1rem;" v-cloak :src="item.img">
				<div style="font-size: 0.65rem;" v-cloak>{{item.text}}</div>
			</div>
		</div>
	</div>
</div>

{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 接口统一管理 -->
<script src="__TEM_STATIC__/js/http/api.js" type="text/javascript" charset="utf-8"></script>
<!-- 当前页面独有js -->
<!-- <script src="__TEM_STATIC__/js/my.js?v={:time()}" type="text/javascript" charset="utf-8"></script> -->
<!-- 引入axios请求库 -->
<script src="__TEM_STATIC__/js/http/axios.min.js" type="text/javascript"></script>
<!-- 再次封装axios 方便使用 -->
<script src="__TEM_STATIC__/js/http/http.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var my = new Vue({
		el: "#app",
		data() {
			return {
				tab: [{
					id: 0,
					img: '../../template/static/img/my/To_be_paid.png',
					text: '未支付'
				}, {
					id: 1,
					img: '../../template/static/img/my/Drop_shipping.png',
					text: '待发货'
				}, {
					id: 2,
					img: '../../template/static/img/my/The_collecting_cargo.png',
					text: '待收货'
				},{
					id: 3,
					img: '../../template/static/img/my/complete.png',
					text: '已完成'
				},],
				tab2: [{
					img: '../../template/static/img/my/my_wallet.png',
					text: '我的钱包'
				}, {
					img: '../../template/static/img/my/my_promote.png',
					text: '我的推广'
				},{
					img: '../../template/static/img/my/commission4.png',
					text: '我的返佣'
				}, {
					img: '../../template/static/img/my/my_service.png',
					text: '联系客服'
				},{
					img: '../../template/static/img/my/my_xiaoxi.png',
					text: '我的消息'
				}],
				tab3: [{
					img: '../../template/static/img/my/my_wallet.png',
					text: '我的钱包'
				},{
					img: '../../template/static/img/my/my_service.png',
					text: '联系客服'
				},{
					img: '../../template/static/img/my/my_xiaoxi.png',
					text: '我的消息'
				}],
				level: {$user.level|default="0"}
			}
		},
		//计算属性
		computed: {},
		//监听属性
		watch: {},
		//钩子函数
		created() {
		},
		mounted() {

		},
		methods: {
			click_tab: function(index) {
				if (index === 0) {
					window.location.href = "{:url('mall/user/vip/money')}"
				} else if (index === 1) {
					window.location.href = "{:url('user/vip/users')}"
				}  else if (index === 2) {
					window.location.href = "{:url('user/vip/rebate')}"
				} else if (index === 3) {
					weui.confirm("{:app_config('mall', 'phone')}", {
					    title: '联系客服',
					    buttons: [{
					        label: '取消',
					        type: 'default',
					        onClick: function(){ console.log('no') }
					    }, {
					        label: '拨打',
					        type: 'primary',
					        onClick: function(){window.location.href = "tel:{:app_config('mall', 'phone')}"}
					    }]
					});
				} else if(index === 4) {
					window.location.href = "{:url('user/member/message')}"
				}
			},
			click_tab2: function(index) {
				console.log(index)
				if (index === 0) {
					window.location.href = "{:url('mall/user/vip/money')}"
				} else if (index === 1) {
					weui.confirm("{:app_config('mall', 'phone')}", {
						title: '联系客服',
						buttons: [{
							label: '取消',
							type: 'default',
							onClick: function(){ console.log('no') }
						}, {
							label: '拨打',
							type: 'primary',
							onClick: function(){window.location.href = "tel:{:app_config('mall', 'phone')}"}
						}]
					});
				} else if(index === 2) {
					window.location.href = "{:url('user/member/message')}"
				}
			},
			click_all() {
				window.location.href = "{:url('mall/order/index')}"
			},
			click_details(id) { //订单详情
				window.location.href = "{:real_url('mall/order/index')}/status/" + id
			}
		}
	});
	{notempty name="levelUp"}
	weui.alert('恭喜你，团队<font color="red">{$levelUp.now|default="市代"}</font>人数达到<font color="red">{$levelUp.all|default="9"}</font>人， 其中直属<font color="red">{$levelUp.direct|default="5"}</font>人，你的会员级别由<font color="red">{$levelUp.now|default="市代"}</font>升级到了<font color="red">{$levelUp.up|default="省代"}</font>！',
	{
	    title: '升级提醒',
		buttons: [{
			label: '确定',
			type: 'primary',
			onClick: function(){
				weui.toast('升级成功', 3000);
			}
		}]
	});
	{/notempty}
</script>
{/block}
